<template>
  <div class="con-cah">
    <chart :options="pie" :init-options="initOptions" ref="pie" autoresize />
  </div>
</template>
<script>
import ECharts from "@/components/echarts/ECharts.vue";
import "echarts/lib/chart/pie";
import "echarts/lib/component/legend";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
export default {
  components: {
    chart: ECharts,
  },
  props: {
    data: {
      type: Array,
      default: [],
    },
    todayConsume: {
      type: String,
      default:'',
    },
  },
  watch: {
    data() {
      this.init();
    },
  },
  data() {
    return {
      initOptions: {
        renderer: "canvas",
      },

      pie: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          right: 0,
          top: "middle",
          formatter: (name) => {
            var temp = "";
            var count = 0;
            for (var item of this.data) {
              count += item.value;
              if (item.name == name) {
                temp = item;
              }
            }
            var pop = ((temp.value / count) * 100).toFixed(1) + "%";
            return temp.name + "  (" + pop + ")  " + temp.value + "元";
          },
          data: [],
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["55%", "75%"],
            center: ["18%", "50%"], // 图表的位置 x,y方向
            avoidLabelOverlap: false,
            left: 20,
            width: "auto",
            label: {
              show: false,
              position: "center",
              normal: {
                show: true,
                position: "center",
                color: "#4c4a4a",
                formatter: "",
                rich: {
                  total: {
                    fontSize: 35,
                    color: "#999999",
                  },
                },
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "30",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              //中间文字显示
              show: true,
            },
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    init() {
      var list = [];
      if (this.data.length > 0) {
        for (var item of this.data) {
          var value = item.value;
          var name = item.name;
          var color = item.color;
          list.push({
            value: item.value,
            name: item.name,
            itemStyle: {
              normal: { color: item.color },
            },
          });

          this.pie.legend.data.push(name);
        }
        this.pie.series[0].data = list;
        this.pie.series[0].label.normal.formatter =
          "共消费" + "\n\r" + this.todayConsume+'元';
      }
    },
  },
  mounted() {
    // this.init();
  },
};
</script>
<style scoped>
.con-cah {
  width: 100%;
  height: 2.5rem;
}
</style>